<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			form{
				width: 60%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			form input{
				width: 80px;
				height: 40px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<form action="b_ut">
			
			<input type="button" value="按钮1" >
			<input type="button" value="按钮2" >
			<input type="button" value="按钮3" >
			<input type="button" value="按钮4" >
			<input type="button" value="按钮5" >
			<input type="button" value="按钮6" >
		</form>
		<script>
			var tj = document.querySelectorAll('input')
			console.log(tj)
			// for(let i=0;i<tj.length;i++){
			// tj[i].onclick=()=>{
			// 	console.log(`你点击了按钮${i+1}`)
			// 	if(tj[i].style.background==''){
			// 		tj[i].style.background='blue'
			// 	}else{tj[i].style.background=''}
			// }
			// }
			for(let i=0;i<tj.length;i++){
				tj[i].onclick=()=>{
					console.log(`你点击了按钮${i+1},已将其他按钮属性清空`)
					if(tj[i].style.background==''){
						for(let j= 0;j<tj.length;j++){
							tj[j].style.background=''
						}
						tj[i].style.background='blue'
					}else{tj[i].style.background=''}
				}
				tj[i].setAttribute('name','b_ut'+i)
				tj[6].removeAttribute()
			}
			
			// for(let i=0;i<tj.length;i++){
			// this.onclick=()=>{
			// 	console.log(`你点击了按钮${i}`)
			// 	if(this.style.background=='red'){
			// 		this.style.background='blue'
			// 	}else{this.style.background='red'}
			// }
			// }
		</script>
	</body>
</html>
